<template>
	<!-- 20221009 -->
	<view class="user-config-mobile-change-page">
		<!-- 页面内容 -->
		<view class="page-content">
			<!-- 表单内容 -->
			<view class="margin-top-60">
				<!-- 手机号 -->
				<view class="padding-lr-30">
					<view class="text-40">验证码将发送至{{mobilePhoneSafe}}</view>
					<view class="margin-top-10 text-26 text-98">请验证你的手机号以进行下一步操作</view>
				</view>
				
				<!-- 验证码 -->
				<view class="margin-top-80 padding-lr-30 padding-bottom-30 border-bottom-ed flex align-center">
					<input class="flex-one" type="number" maxlength="4" placeholder="请输入验证码"
						placeholder-class="text-28 text-aa" v-model="code"></input>
					<ty-register-get-code :mobile-phone="mobilePhone" :type="type"></ty-register-get-code>
				</view>

				<!-- 提交按钮 -->
				<view class="margin-lr-30 line-height-90 radius-45 bg-main-gradient text-center text-32 text-ff"
					style="margin-top: 160rpx;" @click="next()">去更换</view>
			</view>
		</view>
		<!-- 页面浮层 -->
		<view class="page-layer">
		</view>
	</view>
</template>

<script>
	import user from "../api/user.js"
	export default {
		data() {
			return {
				// 手机号
				mobilePhone: '',
				// 手机号中间加星
				mobilePhoneSafe: '',
				// 验证码	
				code: '',
				// 验证码场景
				type: 4
			}
		},

		onReady() {
			// 获取用户手机号
			user.getMobilePhone().then(res => {
				if (res.code == 0) {
					this.mobilePhone = res.data.user_info.mobile_phone
					this.mobilePhoneSafe = this.cn.mobilePhoneSafe(this.mobilePhone)
				}
			})
		},

		methods: {

			/** 
			 * 下一步
			 * @date 2022-10-10
			 */
			next() {
				if (!this.code) {
					this.cn.toast("请输入验证码")
					return
				}

				// 验证旧手机号
				user.verifyOldMobilePhone(this.mobilePhone,this.code).then(res => {
					if (res.code == 0) {
						// 跳转绑定新手机号页面
						uni.redirectTo({
							url: '/pages/user/config/mobileChangeConfirm?mobile=' + this.mobilePhone
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	page {
		background: #FFF;
	}
</style>
